<!--
 * @Author: ZhaoZhiqi
 * @Date: 2022-09-29 16:31:06
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2023-01-09 16:07:02
 * @Description: 窗口咨询
 * @FilePath: \tuanfeng-mini\src\pages\chat.vue
-->
<template>
    <div class="container">
        <div class="wrapper">
            <div class="item" v-for="item in chatList">
                <div class="left">
                    <div v-if="item.type === 1" class="avatar logo"></div>
                </div>
                <div class="content" :style="{textAlign: item.type === 1 ? 'left' : 'right' }">
                    <div class="dialog" :class="{blue: item.type === 0}">
                        <div v-if="item.type === 1" class="dec-left"></div>
                        <div v-if="item.type === 0" class="dec-right"></div>
                        <div class="text" v-for="text in item.content">{{text}}</div>
                        <div class="business" v-for="business in item.list" @click="getMaterial(business)">{{business.name}}</div>
                    </div>
                </div>
                <div class="right">
                    <div v-if="item.type === 0" class="avatar">
                        <u-icon name="account-fill" size="45" color="#fff"></u-icon>
                    </div>
                </div>
            </div>
        </div>
        <div class="search-box">
          <div class="customer"><button class="btn" type="primary" size="mini" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">人工客服</button></div>
          <div class="search"><u-search v-model="keyword" placeholder="输入业务关键字" shape="square" search-icon :clearabled="false" action-text="发送" @custom="submit" @search="submit"></u-search></div> 
        </div>
    </div>
</template>
<script>
import { getDeptDetailAPI } from "../api/department";

export default {
    data() {
        return {
            keyword: "",
            list: [],
            searchList: [],

            // 对话列表
            chatList: [
                {
                    type: 1, // 1左边系统 0右边用户
                    content: [
                        "您好，请输入您想要办理的业务的关键词，团风政务服务将竭诚为您服务。",
                    ],
                    list: [],
                },
            ],
        };
    },
    onLoad(options) {
        let { id, title } = options;
        if (title) {
            wx.setNavigationBarTitle({ title });
            this.chatList[0].content = [
                `您好，当前为${title}，请输入您想要办理的业务的关键词，团风政务服务将竭诚为您服务。`,
            ];
        }

        wx.showLoading({
            title: "加载中...",
        });
        getDeptDetailAPI({ id }).then((res) => {
            this.list = [...res.data];

            wx.hideLoading();
        });
    },
    methods: {
        scrollTo() {
            // 1.使用wx.createSelectorQuery()查询到需要滚动到的元素位置
            wx.createSelectorQuery()
                .select(".wrapper")
                .boundingClientRect((res) => {
                    // 到这里，我们可以从res中读到class为bb4的top，即离顶部的距离（px）
                    // 2使用wx.pageScrollTo()将页面滚动到对应位置
                    wx.pageScrollTo({
                        scrollTop: 100000, // 滚动到的位置（距离顶部 px）
                        duration: 200, //滚动所需时间 如果不需要滚动过渡动画，设为0（ms）
                    });
                })
                .exec();
        },
        getMaterial(item) {
            this.chatList.push({
                type: 1,
                content: [
                    "您好，该业务所需资料：",
                    ...item.dataList.map((d) => d.name),
                    `承诺时限为 ${item.timeLimit} 天`,
                ],
            });
            setTimeout(() => {
                this.scrollTo()
            }, 0)
        },
        submit(v) {
            this.keyword = "";
            if (v.trim()) {
                this.chatList.push({
                    type: 0,
                    content: [v],
                });
                this.search(v);
            }
            setTimeout(() => {
                this.scrollTo()
            }, 0)
        },
        search(v) {
            let list = this.list.filter((item) => {
                return item.name.indexOf(v) !== -1;
            });
            if (list.length) {
                this.chatList.push({
                    type: 1,
                    content: [
                        "您好，您可能想办理以下业务，点击具体查看业务详情：",
                    ],
                    list,
                });
            } else {
                this.chatList.push({
                    type: 1,
                    content: [
                        "您好，您所提问题小团暂时无法回复您，请您重新输入所需办理业务的关键词，如：身份证。",
                    ],
                    list: [[{name: '或点击人工客服转人工服务。'}]],
                });
            }
            setTimeout(() => {
                this.scrollTo()
            }, 0)
        },
    },
};
</script>
<style scoped lang="scss">
.container {
    min-height: 100vh;
    background-color: #efefef;
    .wrapper {
        padding: 10px 0 100px;
        .item {
            display: flex;
            padding: 6px 0;
            .left,
            .right {
                flex: none;
                width: 60px;
                display: flex;
                justify-content: center;
                .avatar {
                    width: 35px;
                    height: 35px;
                    margin-top: 3px;
                    border-radius: 50%;
                    background: #ccc;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    &.logo {
                        background-image: url("https://tuanfeng.whkxzj.com/profile/static/20230109160643-logo.jpg");
                        background-repeat: no-repeat;
                        background-size: contain;
                        background-position: center;
                    }
                }
            }
            .content {
                flex: auto;
                .dialog {
                    position: relative;
                    display: inline-block;
                    margin: 0 5px;
                    background-color: #fff;
                    border-radius: 8px;
                    box-sizing: border-box;
                    padding: 10px 12px;
                    text-align: left;
                    &.blue {
                        background-color: #0c92ff;
                        color: #fff;
                    }
                    .business {
                        color: #0c92ff;
                    }
                    .dec-left {
                        position: absolute;
                        top: 13px;
                        left: -5px;
                        width: 15px;
                        height: 15px;
                        transform: rotateZ(45deg);
                        background: #fff;
                    }
                    .dec-right {
                        position: absolute;
                        top: 13px;
                        right: -5px;
                        width: 15px;
                        height: 15px;
                        transform: rotateZ(45deg);
                        background: #0c92ff;
                    }
                    .text {
                        margin-bottom: 8px;
                        line-height: 1.5;
                        &:last-child {
                            margin: 0;
                        }
                    }
                    .business {
                        margin-bottom: 8px;
                        &:last-child {
                            margin: 0;
                        }
                    }
                }
            }
        }
    }
    .search-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .customer {
      margin-left: 15px;
      margin-bottom: 5px;
      .btn {
        background-color: #2979FF;
        font-size: 12px;
      }
    }
    .search {
      padding: 10px 15px 20px;
      background-color: #fff;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
      box-sizing: border-box;
    }
  }
}
</style>
